---
title: 'Advanced Components'
description: 'Advanced components with advanced docs'
order: 2
---

import { MdxRepl } from 'astro-pure/user'

## Web Content Render

### Quote

The `Quote` component is a simple component that displays a random quote.


<MdxRepl>
import { Quote } from 'astro-pure/advanced'

<Quote />

<Fragment slot='desc'>
```jsx
import { Quote } from 'astro-pure/advanced'

<Quote />
```
</Fragment>
</MdxRepl>

Config:

```ts title="src/site.config.ts"
export const integ: IntegrationUserConfig = {
  // Add a random quote to the footer (default on homepage footer)
  quote: {
    // https://github.com/lukePeavey/quotable
    server: 'https://api.quotable.io/quotes/random?maxLength=60', // [!code highlight:2]
    target: `(data) => data[0].content || 'Error'`
  }
}
```

[Quotable](https://github.com/lukePeavey/quotable) is a open-source API that provides random English quotes.

For Chinese quotes, you can use [Hitokoto](https://developer.hitokoto.cn/sentence/).

```ts title="src/site.config.ts"
export const integ: IntegrationUserConfig = {
  quote: {
    // https://developer.hitokoto.cn/sentence/#%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80
    server: 'https://v1.hitokoto.cn/?c=i', // [!code highlight:2]
    target: `(data) => data.hitokoto || 'Error'`
  }
}
```

### GitHub Card

The `GithubCard` component is a simple component that displays a GitHub user card.

<MdxRepl width='80%'>
import { GithubCard } from 'astro-pure/advanced'

<GithubCard repo='cworld1/astro-theme-pure' />

<Fragment slot='desc'>
```jsx
import { GithubCard } from 'astro-pure/advanced'

<GithubCard repo='cworld1/astro-theme-pure' />
```
</Fragment>
</MdxRepl>

### Link Preview

Preview any link inserted in the content.

<MdxRepl width='80%'>
import { LinkPreview } from 'astro-pure/advanced'

<LinkPreview href='https://www.mozilla.org/en-US/' />
<LinkPreview href='https://www.cloudflare.com/' hideMedia />

<Fragment slot='desc'>
```jsx
import { LinkPreview } from 'astro-pure/advanced'

<LinkPreview href='https://www.cloudflare.com/' />
// `zoomable` option will control mediumzoom tag
// <LinkPreview href='https://www.cloudflare.com/' zoomable={false} />
<LinkPreview href='https://www.cloudflare.com/' hideMedia />
```
</Fragment>
</MdxRepl>

## Data Transformer

### QRCode

<MdxRepl>
import { QRCode } from 'astro-pure/advanced'

<QRCode
  content='https://github.com/cworld1/astro-theme-pure'
  class='inline-flex max-w-44 p-3 bg-muted rounded-lg border' />

<Fragment slot='desc'>
```jsx
import { QRCode } from 'astro-pure/advanced'

// <QRCode /> // default to render current page link
<QRCode
  content='https://github.com/cworld1/astro-theme-pure'
  class='inline-flex max-w-44 p-3 bg-muted rounded-lg border' />
```
</Fragment>
</MdxRepl>

### Medium Zoom

Try click the following image.

![img](https://github.com/user-attachments/assets/6c42b061-df7e-4696-a29b-bff07fe17d88)

See [Other Integrations#medium-zoom](/docs/integrations/others#medium-zoom).
